<template>
    <div class="accountTopLeft">
        <h3 class="titles">小区业务成果分享</h3>
        <div class="accountTopLeft_two">
            <el-card class="accountTopLeft_card_main" v-for="item in 5">
                <el-tag class="labels">使用中</el-tag>
                <div class="titles_title">拱北</div>
                <div class="accountTopLeft_card">
                    <div class="accountTopLeft_card_one">
                        <div class="titles_one">120T</div>
                        <div class="titles_two">收运量</div>
                    </div>
                    <div class="accountTopLeft_card_two">
                        <div class="titles_one">良好</div>
                        <div class="titles_two">质量</div>
                    </div>
                    <div class="accountTopLeft_card_three">
                        <div class="titles_one">2021/12/23 09:35</div>
                        <div class="titles_two">更新时间</div>
                    </div>
                </div>
            </el-card>
        </div>

    </div>
</template>

<script setup lang="ts">

</script>
<style lang="scss" scoped>
.titles {
    color: #403d70;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
}

.titles_title {
    color: #403d70;
    font-size: 14px;
    font-weight: 700;
}

.titles_one {
    color: #403d70;
    font-size: 14px;
    font-weight: 700;
    margin: 6px 0;
}

.titles_two {
    color: #757474;
    font-size: 14px;
    font-weight: 700;
}

.accountTopLeft_two {
    .accountTopLeft_card_main {
        position: relative;
        margin-top: 10px;

        ::v-deep(.el-card__body) {
            padding: 10px;
        }

        .labels {
            position: absolute;
            right: 0;
            top: 0;
            font-weight: 700;
            padding: 4px;
        }

        .accountTopLeft_card {
            display: flex;
            justify-content: space-between;

            .accountTopLeft_card_one {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .accountTopLeft_card_two {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .accountTopLeft_card_three {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }
    }
}
</style>
